<template>
    <div id="create_user">
        <el-dialog
        title="用户编辑"
        :visible.sync="dialogVisible"
        class=''
        top="10vh"
        :close-on-click-modal="false"
        :before-close="handleClose"
        >
            <div class="content_box">
                <el-form v-model= "formData" label-width="80px" label-position="left">
                    <el-form-item label="用户昵称:">
                        <el-input size="small" v-model="formData.personName" placeholder="请输入用户昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码:">
                        <el-input size="small" v-model="formData.verifyPhone" placeholder="请输入用户手机号码"></el-input>
                    </el-form-item>
                    <el-form-item label="选择生日:">
                        <el-date-picker
                        size="small"
                        v-model="formData.birthday"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="选择性别:">
                        <el-select size="small" v-model="formData.gender">
                            <el-option value="1" label="男"></el-option>
                            <el-option value="2" label="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上传头像:">
                        <upload :materialImg="imageList" @handleDelImg="delImg" @changeMaterialImg="changeMaterialImg" maxLength= "1" uploadtype="less" ></upload>
                    </el-form-item>
                    <el-form-item label="信息备注:">
                        <el-input size="small" type="textarea" :rows="2" v-model="formData.remark" placeholder="请输入用户备注信息"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleClose">取 消</el-button>
                <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import upload from '../../commonComponents/upload'
    export default {
        props: ['isCreateUser', 'type', 'id'],
        components: {
            upload
        },
        computed: {
            dialogVisible: {
                get() {
                    return this.isCreateUser;
                },
                set() {}
            }
        },
        data() {
            return {
                formData: {
                    personName: '',
                    verifyPhone: '',
                    birthday: '',
                    gender: '1',
                    headImage: '',
                    remark: '',
                    
                },
                imageList: [],
                
            }
        },
        mounted() {
            if(this.type == 'edit') {
                this.$nextTick(() => {
                    this.getUserDetailById()
                })
            }
        },
        methods: {
            /**获取用户信息 */
            getUserDetailById() {
                this.imageList= []
                try{
                    this.$server.systemControlApi.getUserDetailById(this.id).then(res =>{
                        this.formData.personName= res.data.personName
                        this.formData.verifyPhone= res.data.verifyPhone
                        this.formData.birthday= res.data.birthday
                        this.formData.gender= res.data.gender
                        this.formData.remark= res.data.remark
                        if(res.data.headImage) {
                            this.imageList.push(res.data.headImage)
                        }
                    })
                }catch(err) {this.$paramsError(err)}
            },
            handleClose() {
                this.$confirm('确认关闭？').then(_ => {
                    this.$emit('cancelShow', false)
                }).catch(_ => {});
            },
            changeMaterialImg(val) {
                console.log(val, '品牌')
                this.imageList= val
            },
            delImg(idx){
                this.imageList.splice(idx, 1)
            },
            handleSubmit() {
                try{
                    let {personName, verifyPhone, birthday, gender, remark} =this.formData;
                    if(!/^1[23456789]\d{9}$/.test(verifyPhone)) {
                        this.$message({
                            message: '请正确填写手机号码',
                            type: 'error',
                            duration: 2000
                        })
                    }else if(!personName) {
                        this.$message({
                            message: '用户姓名不能为空',
                            type: 'error',
                            duration: 2000
                        })
                    }else{
                       
                        let params= {
                            personName: personName,
                            verifyPhone: verifyPhone,
                            birthday: this.formate(new Date(birthday).getTime(), 'yyyy-MM-dd'),
                            gender: gender,
                            remark: remark,
                            headImage: this.imageList[0]
                        }
                        if(this.type == 'create') {
                            this.$server.systemControlApi.createUser(params).then(res => { 
                                this.$emit('cancelShow', false)
                                this.$emit('getUserList')
                            })
                        }else if(this.type == 'edit') {
                            params.userId= this.id
                            this.$server.systemControlApi.editUser(params).then( res => {
                                this.$emit('cancelShow', false)
                                this.$emit('getUserList')
                            })
                        }
                        
                    }
                }catch(err) {this.$paramsError(err)}
            }
        }
    }
</script>